<route lang="json5" type="home">
{
  style: {
    navigationBarTitleText: '大厅',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="game-hall">
    <!-- 顶部用户信息区域 -->
    <view class="header">
      <view class="user-info">
        <view class="user-info-left">
          <HeaderTip />
        </view>
        <view class="user-info-right">
          <image src="/static/images/home/email.png" @click="handleEmail" class="email-icon" />
          <image src="/static/images/home/rule.png" @click="handleRules" class="email-icon" />
          <image src="/static/images/home/service.png" @click="handleService" class="email-icon" />
          <image src="/static/images/home/share.png" @click="handleShare" class="email-icon" />
        </view>
      </view>
    </view>
    <!-- 资源展示区域 -->
    <Resource />

    <!-- 横向滚动公告条 -->
    <Announcement :tip="tip" />

    <!-- 广告图片展示 -->
    <view class="game-scene">
      <image :src="homeAds" class="ad-image" mode="aspectFill" />
    </view>

    <!-- 游戏入口区域 -->
    <view class="game-entries">
      <view v-for="(row, rowIndex) in gameRows" :key="rowIndex" class="game-row">
        <view v-for="game in row" :key="game.id" class="game-card" @click="enterGame(game)">
          <view class="game-icon">
            <image :src="game.icon" mode="aspectFit" />
          </view>
          <view class="game-name">
            <view class="game-name-text">
              {{ game.name }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部导航栏 -->
    <Tabbar pagePath="/pages/home/index" />
  </view>
</template>

<script setup lang="ts">
import HeaderTip from '@/components/Header/index.vue'
import Resource from '@/components/resource/index.vue'
import Announcement from '@/components/announcement/index.vue'
import Tabbar from '@/components/tabbar/tabbar.vue'
import { getHomeConfig, getGameType } from '@/api/home'
const homeAds = ref('')
const gameRuleUrl = ref('')
const gameList = ref([])
const tip = ref('参与探险大赛赢丰厚奖励！每日登录领取免费礼包')
// 计算属性：将游戏列表分割成每行两项
const gameRows = computed(() => {
  const rows = []
  for (let i = 0; i < gameList.value.length; i += 2) {
    rows.push(gameList.value.slice(i, i + 2))
  }
  return rows
})

// 进入游戏
const enterGame = (game) => {
  // 可以跳转到对应的游戏页面
  uni.navigateTo({
    url: '/pages/game/index?gameId=' + game.id + '&gameName=' + game.name,
  })
}
const handleShare = () => {
  // 跳转到分享页面
  uni.navigateTo({
    url: '/pages/home/page/share',
  })
}
const handleService = () => {
  // 跳转到服务页面
  uni.navigateTo({
    url: '/pages/home/page/service',
  })
}
const handleRules = () => {
  // 跳转到规则页面
  uni.navigateTo({
    url: '/pages/home/page/rules',
    success: () => {
      uni.setStorageSync('gameRuleUrl', gameRuleUrl.value)
    },
  })
}
const handleEmail = () => {
  // 跳转到邮箱页面
  uni.navigateTo({
    url: '/pages/home/page/email',
  })
}
onShow(async () => {
  const res = await getHomeConfig()
  if (res.code === 200) {
    tip.value = res.data.homeNotice
    homeAds.value = res.data.homeAds
    gameRuleUrl.value = res.data.gameRuleUrl
  }
  const gameTypeRes = await getGameType()
  if (gameTypeRes.code === 200) {
    gameList.value = gameTypeRes.data.map((item) => ({
      id: item.id,
      name: item.name,
      icon: '/static/images/home/theme.png',
    }))
  }
})
</script>

<style lang="scss">
.game-hall {
  min-height: 100vh;
  background-image: url('/static/images/login/loginBackground.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  color: #ffffff;
  padding: 20rpx;
  overflow: hidden;

  .header {
    padding: 20rpx 0;
    position: relative;
    z-index: 10;

    .user-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      .user-info-right {
        display: flex;
        align-items: center;
        gap: 20rpx;
        .email-icon {
          width: 60rpx;
          height: 50rpx;
        }
      }
    }

    .top-buttons {
      display: flex;
      gap: 30rpx;

      .top-btn {
        font-size: 44rpx;
        color: #fff;
        text-shadow: 0 0 10rpx rgba(46, 131, 255, 0.6);
        &:active {
          transform: scale(0.9);
        }
      }
    }
  }

  .game-scene {
    height: 350rpx;
    margin: 30rpx 0;
    position: relative;
    z-index: 10;
    overflow: hidden;
    border-radius: 30rpx;
    border: 2rpx solid #00ffff;
    display: flex;
    justify-content: center;
    align-items: center;

    .ad-image {
      width: 100%;
      height: 100%;
      border-radius: 30rpx;
    }
  }
}

.game-entries {
  padding: 20rpx 0;
  position: relative;
  z-index: 10;

  .game-row {
    display: flex;
    justify-content: space-around;
    margin-bottom: 30rpx;

    .game-card {
      width: 260rpx;
      height: 260rpx;
      border-radius: 20rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;

      .game-icon {
        width: 160rpx;
        height: 160rpx;
        margin-bottom: 20rpx;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .game-name {
        font-size: 32rpx;
        font-weight: bold;
        color: #fff;
        text-shadow: 0 0 10rpx rgba(46, 131, 255, 0.8);
        background: url('/static/images/home/bg.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 200rpx;
        height: 120rpx;
        line-height: 120rpx;
        text-align: center;
        position: absolute;
        bottom: -30rpx;
        z-index: -1;
        .game-name-text {
          background-image: linear-gradient(to bottom, #fff, #74fdff);
          -webkit-background-clip: text;
          color: transparent;
          font-size: 20px;
        }
      }
    }
  }
}

@keyframes glow {
  from {
    box-shadow: 0 0 15rpx rgba(46, 131, 255, 0.3);
  }
  to {
    box-shadow: 0 0 25rpx rgba(46, 131, 255, 0.6);
  }
}

@keyframes floorGlow {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
</style>
